<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css轮播图</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .carousel_map {
        width: 640px;
        height: 400px;
      }

      .slide {
        width: inherit;
        height: inherit;
        overflow: hidden;
        position: relative;
      }

      /* 鼠标放上去显示按钮 */
      .slide:hover .labels {
        display: flex;
      }

      .slide:hover .list {
        animation: none;
      }

      .slide input {
        display: none;
      }

      /* 按钮位置 */
      .labels {
        position: absolute;
        bottom: 0.5em;
        z-index: 1;
        width: inherit;
        justify-content: center;
        display: none; /* 鼠标移开隐藏按钮 */
      }

      /* 按钮样式 */
      .labels label {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        margin: 0 0.3rem;
        border: 0.1rem solid #fff;
        background-color: transparent;
        box-sizing: border-box;
        cursor: pointer;
      }

      /* 选择哪个按钮就有被点击的效果 */
      input[id="pic1"]:checked ~ .labels label[for="pic1"],
      input[id="pic2"]:checked ~ .labels label[for="pic2"],
      input[id="pic3"]:checked ~ .labels label[for="pic3"],
      input[id="pic4"]:checked ~ .labels label[for="pic4"] {
        background-color: #fff;
        border: 0.1rem solid #fff;
      }
      /* 按钮控件选择图片 */
      input[id="pic1"]:checked ~ .list {
        transform: translate(calc(0 * 640px));
      }
      input[id="pic2"]:checked ~ .list {
        transform: translate(calc(-1 * 640px));
      }
      input[id="pic3"]:checked ~ .list {
        transform: translate(calc(-2 * 640px));
      }
      input[id="pic4"]:checked ~ .list {
        transform: translate(calc(-3 * 640px));
      }

      ul {
        list-style: none;
      }

      .list {
        width: calc(5 * 640px);
        height: inherit;
        position: relative;

        /* 设置动画效果 */
        animation: move 15s ease 1s infinite;
      }

      /* 动画关键帧轮播 */
      @keyframes move {
        0% {
          transform: translate(calc(0 * 640px));
        }
        25% {
          transform: translate(calc(-1 * 640px));
        }
        50% {
          transform: translate(calc(-2 * 640px));
        }
        75% {
          transform: translate(calc(-3 * 640px));
        }
        100% {
          transform: translate(calc(-4 * 640px));
        }
      }

      .item {
        width: 640px;
        height: 400px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="carousel_map">
      <div class="slide">
        <!--小圆点-->
        <input type="radio" name="pic" id="pic1" checked />
        <input type="radio" name="pic" id="pic2" />
        <input type="radio" name="pic" id="pic3" />
        <input type="radio" name="pic" id="pic4" />

        <div class="labels">
          <label for="pic1"></label>
          <label for="pic2"></label>
          <label for="pic3"></label>
          <label for="pic4"></label>
        </div>

        <!--需要轮播的图片-->
        <ul class="list">
          <li class="item">
            <a href="###">
              <img
                src="https://img0.baidu.com/it/u=2428794115,620857264&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
                style="height: 100%; width: 100%"
              />
            </a>
          </li>
          <li class="item">
            <a href="###">
              <img
                src="https://img2.baidu.com/it/u=3876299675,565889377&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
                style="height: 100%; width: 100%"
              />
            </a>
          </li>
          <li class="item">
            <a href="###">
              <img
                src="https://img0.baidu.com/it/u=1620164173,2265696619&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
                style="height: 100%; width: 100%"
              />
            </a>
          </li>
          <li class="item">
            <a href="###">
              <img
                src="https://img2.baidu.com/it/u=1651870554,184761908&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
                style="height: 100%; width: 100%"
              />
            </a>
          </li>
          <li class="item">
            <a href="###">
              <img
                src="https://img2.baidu.com/it/u=3987845592,1216234243&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
                style="height: 100%; width: 100%"
              />
            </a>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>
